<template>
  <div>
    <div>
      <!-- {{data}} -->
    </div>
    <van-tabs v-model="activeName" line-width="64px">
      <van-tab title="全部课程" :name="0">
        <div class="line10px"></div>
        <van-list
          v-model="isUpLoading"
          :finished="upFinished"
          :immediate-check="false"
          :offset="10"
          finished-text="数据已全部加载完毕~"
          @load="onLoadList"
        >
          <video-card
            @handleClick="handleClick"
            v-for="item in data"
            :key="item.id"
            :item="item"
            @userSelect="userSelect"
          />
        </van-list>
      </van-tab>

      <van-tab title="我的课程" :name="1">
        <div class="line10px">
          <van-list
            v-model="isUpLoading"
            :finished="upFinished"
            :immediate-check="false"
            :offset="10"
            finished-text="数据已全部加载完毕~"
            @load="onLoadList"
          >
            <video-card
              useOperate
              @handleClick="handleClick"
              v-for="item in data"
              :key="item.id"
              :item="item"
              @userSelect="userSelect"
            />
          </van-list>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import { Tab, Tabs } from "vant";
import API from "@/services";
import VideoCard from "@/components/video-expert-car";
import {
  registerAddEventListener,
  removeEventListener,
} from "../../utils/scrollPage";
export default {
  components: {
    VanTabs: Tabs,
    VanTab: Tab,
    VideoCard,
  },
  name: "ExpertVideoList",
  data() {
    return {
      activeName: 0,
      data: [],
      name: "",
      isUpLoading: false, // 上拉加载
      upFinished: false, // 上拉加载完毕
      offset: 100, // 滚动条与底部距离小于 offset 时触发load事件
      pageSize: 10, // 每页条数
      pageIndex: 1, // 页码
    };
  },

  mounted() {
    registerAddEventListener(this.loading);
  },
  destroyed() {
    removeEventListener();
  },
  methods: {
    //上拉加载请求方法
    onLoadList() {
      this.pageIndex++;
      this.getList();
    },

    async getList() {
      const res = await API.getExpertCourseList({
        params: {
          flag: this.activeName,
          name: this.name,
          pageSize: 10,
          currentPage: this.pageIndex,
        },
      });
      //   this.data = data.list;
      if (res.list == null || res.list.length === 0) {
        this.upFinished = true;
        return;
        //加载结束
      }

      if (res.list.length < this.pageSize) {
        //最后一页不足10条的情况
        this.upFinished = true;
      }

      //处理数据
      if (this.pageIndex === 1) {
        this.data = res.list;
      } else {
        this.data = this.data.concat(res.list);
      }
    },
    handleClick(val, e) {
      if (e.target.id === "popover-link") {
        return;
      }
      this.$router.push({ name: "VideoCourse", params: { courseId: val } });
    },
    async userSelect(val) {
      let params = null;
      let propsParams = null;
      let currentRequest = null;
      let deleteCourse = null;
      if (val.text === "上架") {
        params = {
          flag: 0,
          courseId: val.id,
        };
        currentRequest = API.changeCourseStatus;
      } else if (val.text === "下架") {
        params = {
          flag: 1,
          courseId: val.id,
        };
        currentRequest = API.changeCourseStatus;
      } else if (val.text === "编辑") {
        this.$router.push({
          name: "PublishVideo",
          params: {
            type: "edit",
            id: val.id,
          },
        });
        return;
      }

      if (val.text === "删除") {
        params = {
          id: val.id,
        };
        currentRequest = API.deleteCourse;
      }

      try {
        await currentRequest({ params });
        this.getList();
        this.$toast.success(`${val.text}成功`);
      } catch (error) {
        this.$toast.fail(error.message);
      }
    },
  },
  watch: {
    activeName: {
      async handler() {
        this.pageIndex = 1;
        this.data = [];
        this.upFinished = false;
        this.isUpLoading = false;
        this.getList();
      },
      immediate: true,
    },
    "$store.getters.inputValue"(name) {
      this.name = name;
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.router-container {
  padding: 0;
}
</style>
